<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, handle wire events</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 

<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script> 

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<script type="text/javascript" src="../js/util/Anim.js"></script>
<script type="text/javascript" src="../js/util/DD.js"></script>
<script type="text/javascript" src="../js/util/DDResize.js"></script>
<script type="text/javascript" src="../js/Container.js"></script>
<script type="text/javascript" src="../js/Layer.js"></script>

<link rel="stylesheet" type="text/css" href="../css/WireIt.css" />


<style>

div.wireInfos {
	position: absolute;
	background-color: #AADDFF;
	border: 2px solid #3366CC;
	z-index: 10;
	padding: 10px;
}

</style>

<script>

window.onload = function() {
	
	
	var layer = new WireIt.Layer({});
	
	
	// The wire tooltip
	var wireInfos = WireIt.cn('div', {className: 'wireInfos'}, {display: 'none'}, "<div id='wireTooltip'></div>");
	layer.el.appendChild(wireInfos);
	// method to close the tooltip
	var closeWireInfos = function(e) {
		YAHOO.util.Event.stopEvent(e); 
		wireInfos.style.display = "none";
	};
	// close button
	var wireClose = WireIt.cn('div', {className: "WireIt-Container-closebutton"});
	wireInfos.appendChild(wireClose);
	YAHOO.util.Event.addListener(wireClose, 'click', closeWireInfos);
	
	// Generate the tooltip contents
	YAHOO.util.Event.onAvailable('wireTooltip', function() {
		var el = YAHOO.util.Dom.get('wireTooltip');
		el.innerHTML = "Wires properties :<br />name <input type='text'/><br />";
		
		var okButton = WireIt.cn('button', null, null, 'Ok');
		el.appendChild(okButton);
		YAHOO.util.Event.addListener(okButton, 'click', closeWireInfos);
		
		var cancelLink = WireIt.cn('a', {href: "#"}, null, 'cancel');
		el.appendChild(cancelLink);
		YAHOO.util.Event.addListener(cancelLink, 'click', closeWireInfos);
	});
	
	
	
	var wireClick = function(e, params) {
		var xy = params[1];
		
		var l = this.element.style.left,
			t = this.element.style.top;
		var li = parseInt(l.substr(0, l.length-2),10),
			ti = parseInt(t.substr(0, t.length-2),10);
		wireInfos.style.left = (li+xy[0])+"px";
		wireInfos.style.top = (ti+xy[1])+"px";
		wireInfos.style.display = "";
	},
	
		wireRed = function() {
			this.options.color = 'rgb(255, 0, 0)';
	  		this.redraw();
		},
		wireBlue = function() {
			this.options.color = 'rgb(173, 216, 230)';
			this.redraw();
		};
		
	// Generate a random layer
	for(var i = 0 ; i < 5 ; i++) {
		layer.addContainer({
			terminals: [ {direction: [0,1], offsetPosition: {bottom: -13, left: 25}, editable: false }],
			title: "Block #"+i,
			position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ]
		});
	}
	for(var i = 0 ; i < 7 ; i++) {
		var w = layer.addWire({
			src: {moduleId: Math.floor(Math.random()*5), terminalId: 0},
			tgt: {moduleId: Math.floor(Math.random()*5), terminalId: 0}
		});

		// Subscribe to the wire events
		w.eventMouseIn.subscribe(wireRed, w, true);
		w.eventMouseOut.subscribe(wireBlue, w, true);
		w.eventMouseClick.subscribe(wireClick, w, true);
	}
	
};


</script>
</head><body></body></html>